<template>
        <!-- <el-card class="box-card"> -->
            <div class="areaStyle">
              <el-form inline label-width="60px">
                <el-form-item label="省份" required>
                  <el-select v-model="provinceId" placeholder="请选择省份"  @change="getCity">
                      <el-option
                      v-for="item in provinceData"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                      </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="地市" >
                  <el-select v-model="cityId" placeholder="请选择地市"   @change="getArea">
                      <el-option
                      v-for="item in cityData"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                      </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="区县" v-if="isShowCity">
                  <el-select v-model="countyId" placeholder="请选择区县"  @change="getAreaId">
                      <el-option
                      v-for="item in areaData"
                      :key="item.id"
                      :label="item.name"
                      :value="item.id">
                      </el-option>
                  </el-select>
                </el-form-item>
              </el-form>
            </div>
        <!-- </el-card> -->
</template>
<script>
export default {
    name: 'areaComponent',
    components: {
       
    },
     props: {
        province: {
          type: String,
          default: ''
       },
        city: {
          type: String,
          default: ''
       },
        county: {
          type: String,
          default: ''
       }
     },
     computed: {
    
     },
    watch: {
        provinceId (newVal) {
            this.getCityList(newVal)
        },

        cityId (newVal) {
            this.getAreaList(newVal)
        },
        countyId (newVal) {
         
        },
        province (newVal) {
           this.provinceId = newVal
           this.changData.provinceId = newVal
           if (newVal == '110100' || newVal == '120100' || newVal == '310100' || newVal == '500000') {
                  this.changData.isZhi = true
                }
           this.$emit('areaObj', this.changData)
        },
        city (newVal) {
           this.cityId = newVal
           this.changData.cityId = newVal
           this.$emit('areaObj', this.changData)
        },
        county (newVal) {
           this.countyId = newVal
           this.changData.countyId = newVal
           this.$emit('areaObj', this.changData)
        }
    },
    data () {
      return {
        // cityId: '',
        // countyId: '',
        phaseStudyId: '',
        provinceData: [],
        cityData: [],
        areaData: [],
        isShowCity: true,

        provinceId: '',
        cityId: '',
        countyId: '',
        provinceItem: '',
        cityItem: '',
        countyItem: '',
        changData: {}
      }
    },
    mounted () {
      // this.isShowCity = true
        this.provinceId = this.province
        this.cityId = this.city
        this.countyId = this.county

        this.getProviceList()
        this.getCityList(this.provinceId)
        this.getAreaList(this.cityId)

        console.log(this.provinceId, this.cityId, this.countyId)
    },
    methods: {
      getCity () {
        this.areaData = []
        this.isShowCity = true
        this.cityId = ''
        this.cityItem = ''
        this.countyId = ''
        this.countyItem = ''
        this.$emit('areaObj', '')
        this.getCityList()
      },
      getArea () {
        this.$emit('areaObj', '')
        for (var a of this.provinceData) {
            if (a.id == this.provinceId) {
                this.provinceItem = a
            }
          }
          for (var b of this.cityData) {
            if (b.id == this.cityId) {
                this.cityItem = b
            }
          }
        for (var obj of this.cityData) {
          if (obj.id == this.cityId && obj.levelCode == 3) {
            this.isShowCity = false
             let areaObj = {
              provinceId: this.provinceId,
              provinceItem: this.provinceItem,
              cityId: this.cityId,
              cityItem: this.cityItem,
              countyId: this.countyId,
              countyItem: this.countyItem,
              isZhi: true
            }
            this.$emit('areaObj', areaObj)
          }
        }        
        this.countyId = ''
        this.countyItem = ''
        this.getAreaList()
      },
        // 获取省
      getProviceList () {
        var params = {
          PageNum: 1,
          PageSize: 100
        }
        this.$store.dispatch('schoolManage/Provinces', params).then(res => {
          // console.log(res)
            this.provinceData = res.items
        })
      },
      getCityList (id) {
        if (!id) {
          return
        }
             var params = {
                ParentId: id,
                PageNum: 1,
                PageSize: 100
              }
           this.$store.dispatch('schoolManage/Areas', params).then(res => {
                this.cityData = res.items
                // this.areaData = []
                let areaObj = {
                  provinceId: id,
                  cityId: this.cityId,
                   countyId: this.countyId
                }
            this.$emit('areaObj', areaObj)
           })
      },
      getAreaList (id) {
        if (!id) {
          return
        }
             var params = {
                ParentId: id,
                PageNum: 1,
                PageSize: 100
              }
           this.$store.dispatch('schoolManage/Areas', params).then(res => {
                this.areaData = res.items 
                let areaObj = {
                  provinceId: this.provinceId,
                  cityId: this.cityId,
                   countyId: this.countyId
                }
               this.$emit('areaObj', areaObj)
                for (var obj of this.provinceData) {
                  if (obj.id == this.provinceId) {
                      this.provinceItem = obj
                  }
                }
                for (var obj2 of this.cityData) {
                  if (obj2.id == this.cityId) {
                      this.cityItem = obj2
                  }
                }
           })
      },
   
      // 获取城市id
      getCityId (id) {
        this.areaData = []
        this.countyId = ''
        this.cityId = id
        this.selectAllChildArea('城市')
      },
      // 获取区域id
      getAreaId (id) {
        for (var obj3 of this.areaData) {
            if (obj3.id == id) {
                this.countyItem = obj3
            }
          }
        this.countyId = id
        let areaObj = {
          provinceId: this.provinceId,
          provinceItem: this.provinceItem,
          cityId: this.cityId,
          cityItem: this.cityItem,
          countyId: this.countyId,
          countyItem: this.countyItem,
          isZhi: false
        }
        this.$emit('areaObj', areaObj)
      }
    }
}
</script>
<style scoped>
.right-main{
    margin-top: 15px;
    background: #fff;
    min-height: 150px;
    padding: 0 0 20px;
}
.operation span{
    cursor: pointer;
    color: #409EFF;
}
.areaStyle{
  display: inline-block;
}
</style>
